<template>
  <div style="display: flex; justify-content: end">
    <el-checkbox-group v-model="checked">
      <el-checkbox label="日" value="day" />
      <el-checkbox label="周" value="week" />
      <el-checkbox label="月" value="month" />
    </el-checkbox-group>
    <el-button type="primary" @click="handleAdd" style="margin-left: 20px"
      >新增一行</el-button
    >
  </div>
  <el-table :data="list" style="width: 100%">
    <el-table-column label="排名起" width="120">
      <template #default="{ row }">
        <el-input v-model="row.start" />
      </template>
    </el-table-column>
    <el-table-column label="排名止" width="120">
      <template #default="{ row }">
        <el-input v-model="row.end" />
      </template>
    </el-table-column>
    <el-table-column label="奖励金额" min-width="160">
      <template #default="{ row }">
        <el-form-item label="日" v-if="checked.includes('day')">
          <el-input v-model="row.value.day" />
        </el-form-item>
        <el-form-item label="周" v-if="checked.includes('week')">
          <el-input v-model="row.value.week" />
        </el-form-item>
        <el-form-item label="月" v-if="checked.includes('month')">
          <el-input v-model="row.value.month" />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120">
      <template #default="{ row }">
        <el-button type="danger" @click="handleRemove(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <div style="text-align: right; margin-top: 20px">
    <el-button @click="handleSubmit" type="success">提交</el-button>
  </div> -->
  <pre>{{ JSON.stringify(list, null, 4) }}</pre>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { uniqueId } from "lodash";

const checked = ref(["day", "week", "month"]);
const list = ref([
  {
    start: "1",
    end: "3",
    value: {
      day: 100,
      week: 200,
      month: 300,
    },
  },
]);

const handleAdd = () => {
  list.value = [
    ...list.value,
    { start: "", end: "", value: {}, id: uniqueId() },
  ].map((x) => ({
    ...x,
    id: uniqueId(),
  }));
};

const handleRemove = (id) => {
  list.value = list.value.filter((x) => x.id !== id);
};

const handleSubmit = () => {
  console.log("🚀 ~ list:", list.value);
  const nextList = list.value.flatMap((x) =>
    Object.entries(x.value).map(([k, v]) => ({
      start: x.start,
      end: x.end,
      [k]: v,
    }))
  );
  console.log("🚀 ~ handleSubmit ~ nextList:", nextList);
};
</script>
